<template>
  <div class="aside-box">
    <ul>
      <li>
        <router-link to="/musichome/findmusic" tag="div">
          <span>
            <i class="iconfont icon-eye"></i>
            <i>发现音乐</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/playlist" tag="div">
          <span>
            <i class="iconfont icon-tuijian"></i>
            <i>推荐歌单</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/newmusic" tag="div">
          <span>
            <i class="iconfont icon-zuixin"></i>
            <i>最新音乐</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/musicvideo" tag="div">
          <span>
            <i class="iconfont icon-mv"></i>
            <i>最新MV</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/ranking" tag="div">
          <span>
            <i class="iconfont icon-paihangbang"></i>
            <i>排行榜 </i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/singerSquare" tag="div">
          <span>
            <i class="iconfont icon-geshou"></i>
            <i>歌手 </i>
          </span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: "/",
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.path = val.path
      },
      // 深度观察监听
      deep: true,
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../scss/common.scss";
.aside-box {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
  ul {
    padding-top: 3px;
    width: 100%;
    height: calc(100% - 115px);
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: left;
      transition: 0.5s;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          display: inline-block;
          width: 100px;
          text-align: left;
        }
      }
      i {
        display: inline-block;
        font-size: 14px;
        font-style: normal;
      }
      i:nth-child(1) {
        padding-right: 8px;
      }
      i:nth-child(2) {
        padding-right: 20px;
      }
    }
    li:hover {
      cursor: pointer;
      background: $bg;
      color: $primary;
    }
  }
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}
.path_active {
  background: $bg;
  color: $primary;
}
.router-link-active {
  border-right: 2px solid $bg;
  box-sizing: border-box;
  color: $primary;
}
@media (max-width: 600px) {
  .aside-box {
    width: 100vw;
    overflow-x: scroll;
  }
  ul {
    width: 100%;
    height: 50px;
    display: flex;
    li {
      width: 25%;
      span {
        text-align: center !important;
      }
      i {
        display: inline-block;
        font-size: 14px;
        font-style: normal;
      }
      i:nth-child(1) {
        padding-right: 0px;
        display: none;
      }
      i:nth-child(2) {
        padding-right: 0px !important;
      }
    }
    li:hover {
      cursor: pointer;
      background: $bg;
      color: $primary;
    }
  }
  .router-link-active {
    border-right: none;
  }
}
</style>
